<template>
     <div class="co">
    <div>
      <el-carousel class="el-carousel" height="500px" indicator-position="outside">
     <el-carousel-item v-for="item in imgUrl" :key="item.id">
     <img :src='item.imgUrl' width="600px" height="500px" alt="">
     </el-carousel-item>
     </el-carousel>
     <div class="Neir">
       <div class="n-logo">
        <el-avatar :size="80" :src='dataList.logo'></el-avatar>
        <span class="n-span">个人房屋转租</span>
        <span class="n-spana">{{ dataList.age}} | {{dataList.constellation}} | {{dataList.vocation}}</span>
       </div>
       <div class="n-hdes">
        <span>详情简介：{{ dataList.hdesc }}</span>
       </div>
       <div class="n-dis">
        <span  class="n-list">基本信息</span>
        <span style="color: red; font-weight: bold;margin-left: 300px;font-size: 25px;">￥{{ dataList.hprice }}/月</span>
       </div>
       <div class="n-xingxi">
        <span>地址：{{ dataList.haddress }}</span><br>
        <span>付款方式：{{ dataList.payType }}</span><br>
        <span>出租形式{{ dataList.rentingType }}</span><br>
        <span>面积：{{ dataList.hproportion }}平方米</span><br>
        <span>房间：{{ dataList.roomNum }}</span><br>
        <span>发布时间：{{ dataList.htime }}</span><br>
        <span>电话号码：{{ dataList.phone }}</span>
       </div>
     </div>
    </div>
   <div  style="clear:both;"></div>
   <div class="jia-j">
    <span>家具信息</span>
   </div>
   <br>
     <div class="jiaju">
      <div  v-for="item in fuData" :key="item.id">
         <img :src='item.furnitureImg' width="100px" height="100px" alt=""><br>
          <span>{{ item.furnitureName }}</span>
      </div>
      
     </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      imgUrl:{},
      fuData:{}
    };
  },
  created() {
    document.title="房屋详情"
    this.getByidList();
  },
  methods: {
    async getByidList() {
      let id =this.id = this.$route.query.id;
      // 房屋详情
      let ret = await this.$http.get(`/qiantai/index/byId/${id}`);
      this.dataList = ret.data;
     
      console.log(ret.data.furnitures);
      // 轮播图
      let img = await this.$http.get(`/qiantai/index/img/${id}`);
      this.imgUrl = img.data;
      console.log(img);
      //家具
      let fuinfo = await this.$http.get("qiantai/index/byListid",{params:{idList:ret.data.furnitures}});
      this.fuData = fuinfo.data;
      console.log(fuinfo);
      if (this.dataList && this.dataList.htime) {
      this.dataList.htime = new Date(this.dataList.htime).toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    });
  }
  }
  }
}
</script>

<style lang="less" scoped>
.co{
  display: flex;
  flex-direction: column; /* 子元素垂直排列 */
  align-items: center; /* 子元素水平居中 */
  justify-content: center; /* 子元素垂直居中 */
  // margin:  auto 10%;
  margin-top: 150px;
  width: 100%;
  height: 100hv;
}
.el-carousel{
  width: 600px;
  margin-top: -30px;
  float: left;
}
.el-carousel__item  {
    width: 600px;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .Neir{
    width: 600px;
    height: 500px;
    // background-color: aqua;
    float: left;
    margin-top: -30px;
  }
  .n-logo{
    width: 400px;
   
    margin-left: 20px;
    margin-top: 20px;
  }
  .n-span{
    font-size: 29px;
    margin-left: 10px;
    font-weight: bold;
    position: absolute;
  }
  .n-spana{
    color:darkgray;
    margin-left: 10px;
    margin-top: 40px;
    font-weight: 300px;
    font-size: 20px;
    position: absolute;
  }
  .n-hdes{
   
    margin-left: 20px;
    margin-top: 10px;
 
  }
  .n-dis{
    margin-left: 20px;
    margin-top: 30px;
  }
  .n-list{
    
    font-weight: bold;
    font-size: 25px;
  }
  .n-xingxi{
    margin-left: 20px;
    margin-top: 25px;
    line-height: 40px;
  }
  .jiaju{
    width: 1000px;
    text-align: center;
    display: flex;
  // flex-direction: column; /* 子元素垂直排列 */
  align-items: center; /* 子元素水平居中 */
  justify-content: left; /* 子元素垂直居中 */
  flex-wrap: wrap; /* 允许子元素换行 */
  }
  .jia-j{
    text-align: left;
    margin-left: -900px;
    font-weight: bold;
    font-size: 25px;
  }
</style>